<script setup lang="ts">
const route=useRoute()
const codeUrl=ref('')

const orderId=route.query.orderId
const name=route.query.driverName
const startAddr=route.query.startAddr
const endAddr=route.query.endAddr
const date=new Date(route.query.rawDate as string)
const fee=route.query.c
onMounted(function () {
  barTitleStore().setTitle('乘客端 - 订单详情')
  cFetch<any>(`/payment/api/payment`,{
    auth:true,
    defaultOpts:{
      method: 'POST',
      body:{
        orderId:orderId,
      }
    }
  }).then((res) => {
    codeUrl.value=res.data[0].codeUrl
  })
})
function refreshStatus(){
  cFetch<OrderPO>('/payment/api/query',{
    auth:true,
    defaultOpts:{
      method: 'POST',
      body:{
        orderId:orderId,
      }
    }
  }).then((res) => {
    if(res.data[0].status===1){
      showToast('正在等待司机确认……')
    }else {
      showToast('刷新成功，司机已确认收款，3s后自动返回')
      setTimeout(()=>{navigateTo('/bills')},3000)
    }
  })
}
let config = useRuntimeConfig()

function replaceURL(url: string): string {
  if (url === config.public.defaultUserAvatarURL) return url
  return config.public.enableReplaceImgURL ? url.replace(config.public.oldImgHost, config.public.newImgHost) : url
}
</script>

<template>
  <van-image
      width="15rem"
      height="15rem"
      fit="contain"
      style="margin-top: 1rem"
      :src="replaceURL(codeUrl)"
  />
<div style="width: 100%;margin: 1rem 0;">
  <van-cell-group inset width="100%" class="item">
    <van-cell title="司机昵称">
      <template #value>
        <span class="value-color">{{name}}</span>
      </template>
    </van-cell>
    <van-cell title="出行时间">
      <template #value>
                <span class="value-color" style="font-weight: bold;color: RGB(184,134,11)">{{date.getFullYear()}}年{{date.getMonth()+1}}月{{date.getDate()}}日 {{date.getHours().toString().padStart(2,'0')}}:{{date.getMinutes().toString().padStart(2,'0')}}</span>
      </template>
    </van-cell>
    <van-cell title="出发地">
      <template #value>
                <span class="value-color">{{startAddr}}</span>
      </template>
    </van-cell>
    <van-cell title="目的地">
      <template #value>
                <span class="value-color">{{endAddr}}</span>
      </template>
    </van-cell>
    <van-cell>
      <template #title>
        <span class="custom-title">订单金额</span>
      </template>
      <template #value>
        <span style="color:red;font-weight: bold">
          ￥{{fee}}
        </span>
      </template>
    </van-cell>
    <van-cell>
      <template #value>
        <div style="display: flex;justify-content: center">
          <van-button type="primary" @click="refreshStatus">我已支付，刷新</van-button>
        </div>
      </template>
    </van-cell>
  </van-cell-group>
</div>


</template>

<style scoped>

</style>